<template>
  <div
    :class="className"
    :style="{height: height,width: width}"
  />
</template>

<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
require('echarts/theme/macarons')

export default {
  name: 'BarChart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '530px'
    },
    sumCase: {
      type: Object
    },
    majorCase: {
      type: Object
    },
    parentObject: {
      type: Object
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null,
      parentData: '',
      defaultData: {}
    }
  },
  watch: {
    sumCase: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    },
    majorCase: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    },
    parentObject: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    },
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.parentData = this.sumCase || this.majorCase || this.parentObject
    this.initChart()
    this.$nextTick(t => {
      this.__resizeHanlder = debounce(() => {
        this.chart && this.chart.resize()
      }, 100)
    })
    window.addEventListener('resize', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    window.removeEventListener('resize', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions({
      legendNamesArray,
      unitNames,
      cases,
      validConnections,
      validConnectedCustomers,
      ptp,
      dynamicHeight
    } = {}) {
      console.warn(unitNames, cases, validConnections, validConnectedCustomers, ptp, dynamicHeight, this.height)
      // config
      const seriesLabel = seriesLabel || {
        normal: {
          show: true,
          // position: [3, 0],
          position: 'right',
          distance: 2,
          textStyle: {
            fontSize: 10,
            color: '#666'
          }
        }
      }
      const parentBarData = {
        title: {
          text: '',
          subtext: ''
        },
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#666'
          },
          // bottom: 20,
          data: legendNamesArray || ['每小时处理案件数', '每小时有效联络数', '每小时有效联络客户数', '每小时PTP数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          inverse: true,
          type: 'category',
          data: unitNames
        },
        dataZoom: dynamicHeight && [
          {
            start: 0,
            end: 10,
            show: true,
            type: 'slider',
            handleSize: 20,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 20,
            height: '80%',
            showDataShadow: false,
            left: '96%',
            textStyle: {
              fontSize: 11,
              color: '#666'
            }
          }
        ] || [],
        series: [{
          name: '每小时处理案件数',
          type: 'bar',
          barMaxWidth: 15,
          barGap: 0.1,
          // stack: '生产',
          data: cases,
          label: seriesLabel
        }, {
          name: '每小时有效联络数',
          type: 'bar',
          barMaxWidth: 15,
          // stack: '生产',
          data: validConnections,
          label: seriesLabel
        }, {
          name: '每小时有效联络客户数',
          type: 'bar',
          barMaxWidth: 15,
          // stack: '销售',
          data: validConnectedCustomers,
          label: seriesLabel
        }, {
          name: '每小时PTP数',
          type: 'bar',
          barMaxWidth: 15,
          // stack: '销售',
          data: ptp,
          label: seriesLabel
        }]
      }
      if (dynamicHeight) {
        this.chart.resize({
          height: dynamicHeight
        })
      }
      this.chart.setOption(parentBarData)
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      const cData = this.chartData || {}
      console.log('this.chartData:', cData, this.chartData)
      this.setOptions(cData)
    },
    setOptions1(obj) {
      // common config
      obj.legend && (obj.legend.selectedMode = false)
      const currColors = location.hash.split('=')[1] && decodeURIComponent(location.hash.split('=')[1]).replace(/\[|\]|\'/img, '').split(',') || ''
      obj.color = currColors || obj.color
      this.chart.setOption(obj)
    },
    initChart1() {
      console.log('parentData:', this.parentData)
      this.chart = echarts.init(this.$el, 'macarons')
      if (this.parentData) {
        this.chart.setOption(this.parentData)
        this.chart.on('finished', arg => {
          // console.log('chartDataUrl:', this.chart.getDataURL({ type: 'jpg', pixelRatio: 1 }))
        })
        return
      }
      // default test data
      this.chart.setOption(this.defaultData)
    }
  }
}
</script>
